use dioxus::prelude::*;

#[derive(PartialEq, Clone, Props)]
pub struct PaginationProps {
    /// 当前页码
    pub current_page: u64,
    /// 总页数
    pub total_pages: u64,
    /// 页面变化时的回调函数
    pub on_page_change: EventHandler<u64>,
}

#[component]
pub fn Pagination(props: PaginationProps) -> Element {
    let page_numbers = (1..=props.total_pages).collect::<Vec<_>>();
    let visible_pages = if props.total_pages <= 7 {
        page_numbers
    } else {
        let mut pages = Vec::new();
        if props.current_page <= 4 {
            pages.extend(1..=5);
            pages.push(0); // 省略号
            pages.push(props.total_pages);
        } else if props.current_page >= props.total_pages - 3 {
            pages.push(1);
            pages.push(0); // 省略号
            pages.extend((props.total_pages - 4)..=props.total_pages);
        } else {
            pages.push(1);
            pages.push(0); // 省略号
            pages.extend((props.current_page - 1)..=(props.current_page + 1));
            pages.push(0); // 省略号
            pages.push(props.total_pages);
        }
        pages
    };

    rsx! {
        nav { class: "mt-4 flex items-center justify-center",
            div { class: "flex items-center space-x-2",
                button {
                    class: format_args!(
                        "px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 {} {}",
                        if props.current_page > 1 { "bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" } 
                        else { "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500" },
                        if props.current_page > 1 { "" } else { "disabled" }
                    ),
                    onclick: move |_| {
                        if props.current_page > 1 {
                            props.on_page_change.call(props.current_page - 1);
                        }
                    },
                    "上一页"
                }

                div { class: "flex items-center space-x-1",
                    for page in visible_pages {
                        if page == 0 {
                            span { class: "px-2 text-gray-500", "..." }
                        } else {
                            button {
                                class: format_args!(
                                    "px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 {}",
                                    if page == props.current_page {
                                        "bg-blue-600 text-white"
                                    } else {
                                        "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                                    }
                                ),
                                onclick: move |_| {
                                    if page != props.current_page {
                                        props.on_page_change.call(page);
                                    }
                                },
                                "{page}"
                            }
                        }
                    }
                }

                button {
                    class: format_args!(
                        "px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 {} {}",
                        if props.current_page < props.total_pages { "bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" }
                        else { "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500" },
                        if props.current_page < props.total_pages { "" } else { "disabled" }
                    ),
                    onclick: move |_| {
                        if props.current_page < props.total_pages {
                            props.on_page_change.call(props.current_page + 1);
                        }
                    },
                    "下一页"
                }
            }
        }
    }
}